<template>
  <view :class="theme">
    <view class="m-30 b-rounded-16 bg-section" style="box-shadow: 0 0 20rpx 0 rgba(0,0,0,0.1);">
      <view class="flex-row justify-between items-center" style="padding: 24rpx 30rpx 0;">
        <text>{{ orderInfo.status_text }}</text>
        <view class="flex-row" v-if="mapStatus[orderInfo.status]">
          <button @click="operation(item.key)" v-for="(item, index) in mapStatus[orderInfo.status]?.btn" :key="index"
            class="ml-20 items-center justify-center h-50 b-rounded-50 text-24 fw-500" plain hover-class="op-[0.6]"
            :style="item.type ? { backgroundColor: $config.COLOR_PRIMARY, color: $config.COLOR_WHITE, border: 'none' } : { border: `2rpx solid ${$config.COLOR_SECTION}`, color: $config.COLOR_WHITE }">
            <view class="flex-row items-center">
              <uv-image v-if="item.img" :showLoading="false" width="40" height="40" class="mr-10" :src='item.img'
                mode="aspectFit" />
              <text>{{ item.text }}</text>
            </view>
          </button>
        </view>
      </view>

      <view @click="uniNavigator({ url: `/pages/client/mall/goodsInfo?sn=${item.goods_sn}` })"
        v-for="(item, index) in orderInfo.orderGoods" :key="index" class="pb-18 p-30"
        :style="{ borderTop: index ? `2px solid ${$config.COLOR_12}` : 'none' }">
        <view class="flex-row">
          <uv-image radius="16" width="200" height="200" :src="include(item.goods_img)" />
          <view class="flex-1 overflow-hidden ml-18 justify-around">
            <text class="multi-ellipsis text-28">{{ item.goods_name || "-" }}</text>
            <text class="ellipsis color-placeholder text-22">规格：{{ item.spec_text || "-" }}</text>
            <label class="items-baseline justify-between">
              <text class="color-primary fw-700">
                <text class="text-36">{{ Number(item.price || 0).toFixed(2) }}</text>
                <!-- <text class="ml-10">元</text> -->
              </text>
              <text class="ml-28 color-base0 fw-400">
                数量: {{ item.num || 0 }}
              </text>
            </label>
          </view>
        </view>
      </view>

      <view class="relative" style="border-top: 2rpx dashed #eee;">
        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="box-shadow: inset 0 0 20rpx 0 rgba(0,0,0,0.1); bottom: auto; right: auto; top: 50%; left: -20rpx; transform: translateY(-50%);" />
        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="top: 50%; right: 100%; bottom: auto; left: auto; transform: translate(10rpx, -50%);" />

        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="box-shadow: inset 0 0 20rpx 0 rgba(0,0,0,0.1); top: 50%; right: -20rpx; bottom: auto; left: auto; transform: translateY(-50%);" />
        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="top: 50%; right: auto; bottom: auto; left: 100%; transform: translate(-10rpx, -50%);" />
      </view>

      <view v-if="orderInfo.address" style="padding: 50rpx 30rpx 30rpx;">
        <label class="text-28 justify-between">
          <text>收货人：{{ orderInfo.address.name }}</text>
          <text class="ml-30">{{ orderInfo.address.mobile }}</text>
        </label>
        <label class="mt-12 lh-60 color-16">
          {{ orderInfo.address.mergename }}
        </label>
      </view>

    </view>

    <view class="bg-section b-rounded-16 p-30 fw-400" style="margin: 0 30rpx 30rpx;">
      <label class="text-28 justify-between">
        <text>商品金额</text>
        <text>RMB:{{ Number(orderInfo.total_price || 0).toFixed(2) }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>运费</text>
        <text>RMB:{{ Number(orderInfo.ship_postfee || 0).toFixed(2) }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>实付金额</text>
        <text class="color-primary fw-700 text-36">{{ Number(orderInfo.payment || 0).toFixed(2) }}</text>
      </label>
    </view>

    <view class="bg-section b-rounded-16 m-30 p-30 fw-400" style="margin: 0 30rpx 30rpx;">
      <label class="text-28 justify-between">
        <text>订单编号</text>
        <text>{{ orderInfo.order_sn || "-" }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>下单时间</text>
        <text>{{ orderInfo.create_at || "-" }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>付款时间</text>
        <text>{{ orderInfo.pay_at || "-" }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>完成时间</text>
        <text>{{ orderInfo.end_at || "-" }}</text>
      </label>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const orderInfo = ref<AnyObject>({});

const mapStatus: AnyObject = {
  0: {
    text: "待支付",
    btn: [
      { text: "去付款", type: 1, key: "pay" },
      { text: "取消订单", type: 0, key: "cancel" },
    ]
  },
  2: {
    text: "待收货",
    btn: [
      { text: "签收", type: 1, key: "receive", img: "" },
      { text: "物流", type: 0, key: "logistics", img: "" },
    ]
  },
  4: {
    text: "已收货",
    btn: [
      { text: "物流", type: 0, key: "logistics", img: "" },
    ]
  },
};

onLoad(({ order_id }: any) => {
  uni.request({
    url: "/shopOrderDetails",
    data: { order_id },
    success({ data }: any) {
      orderInfo.value = data;
    }
  });
});

const operation = (key: string) => {
  switch (key) {
    case "pay":
      uni.setStorage({
        key: "payInfo",
        data: {
          amount: Number(orderInfo.value.payment || 0).toFixed(2),
          description: "商品结算",
          order_type: 1,
          order_id: orderInfo.value.order_id
        },
        success() {
          uni.redirectTo({ url: "/pages/client/main/pay" });
        }
      });
      break;
    case "cancel":
      uni.request({
        url: "/cancelOrder",
        data: {
          order_id: orderInfo.value.order_id
        },
        success() {
          uni.navigateBack();
        }
      });
      break;
    case "receive":
      uni.request({
        url: "/confirmOrder",
        data: {
          order_id: orderInfo.value.order_id
        },
        success() {
          uni.navigateBack();
        }
      })
      break;
    case "logistics":
      uni.setStorage({
        key: "logistics",
        data: {
          orderExpress: orderInfo.value.orderExpress,
          ship_name: orderInfo.value.ship_name,
          ship_number: orderInfo.value.ship_number,
          address: orderInfo.value.address,
          create_at: orderInfo.value.create_at,
          status: orderInfo.value.status,
          end_at: orderInfo.value.end_at,
        },
        success() {
          uni.navigateTo({ url: "/pages/client/main/logistics" });
        }
      });

      break;

    default:
      break;
  }
}

</script>

<style lang="scss" scoped>
// scss
</style>